<template>
  <div class="box">
    <!--操作记录 -->
    <el-dialog
      title="查看"
      v-model="editVisible"
      width="70%"
      top="5vh"
      @close="handleclosedetail"
    >
      <el-form label-width="180px" id="printCons">
        <div class="content_info">
          <el-form-item label="林权证编号：">{{
            InfoDetail.certificateNumber
          }}</el-form-item>
          <el-form-item label="登记表编号：">{{
            InfoDetail.registerNumber
          }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="林地所有权权利人：">{{
            InfoDetail.woodlandRightPeople
          }}</el-form-item>
          <el-form-item label="林地使用权权利人：">{{
            InfoDetail.woodlandUsePeople
          }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="森林或林木所有权权利人：">{{
            InfoDetail.forestRightPeople
          }}</el-form-item>
          <el-form-item label="森林或林木使用权权利人：">{{
            InfoDetail.forestUsePeople
          }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="座落：">{{ InfoDetail.locate }}</el-form-item>
          <el-form-item label="小地名：">{{ InfoDetail.locateName }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="林班：">{{ InfoDetail.forestClass }}</el-form-item>
          <el-form-item label="小班：">{{ InfoDetail.smallClass }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="林地面积（亩）：">{{
            InfoDetail.forestArea
          }}</el-form-item>
          <el-form-item label="株数：">{{ InfoDetail.forestNumber }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="林种：">{{ InfoDetail.forestType }}</el-form-item>
          <el-form-item label="主要树种：">{{ InfoDetail.primaryType }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="使用年限（年）：">{{ InfoDetail.useYear }}</el-form-item>
          <el-form-item label="林权终止时间：">{{ InfoDetail.finishDate }}</el-form-item>
        </div>
        <!-- <div class="content_info">
          <el-form-item label="东至：">{{InfoDetail}}</el-form-item>
          <el-form-item label="西至：">{{InfoDetail}}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item label="南至：">{{InfoDetail}}</el-form-item>
          <el-form-item label="北至：">{{InfoDetail}}</el-form-item>
        </div> -->
        <div class="content_info">
          <el-form-item label="发证机关：">{{
            InfoDetail.issuingAuthority
          }}</el-form-item>
          <el-form-item label="林权发证时间：">{{ InfoDetail.issuingDate }}</el-form-item>
        </div>
        <div class="content_info">
          <el-form-item
            :label="'坐标' + Number(index + 1) + '：'"
            v-for="(item, index) in InfoDetail.coordinates"
            :key="index"
            >地址：{{ item.name }}经度：{{ item.longitude }},纬度{{
              item.latitude
            }}</el-form-item
          >
        </div>
        <div class="content_info">
          <el-form-item label="标注：">{{ InfoDetail.remark }}</el-form-item>
        </div>
        <el-form-item label="上传照片：">
          <!--  支持图片放大 -->
          <el-image
            v-for="(item, index) in InfoDetail.urls"
            :key="index"
            :src="item.tempImageUrl"
            :preview-src-list="[item.tempImageUrl]"
            class="head_pic"
          />
        </el-form-item>
       <el-form-item label="审核文件：" v-if="InfoDetail.status == 15">
        <a :href="InfoDetail.tempSealImageUrl" target="_blank">{{ InfoDetail.sealImageUrl }}</a>
          <!-- <el-image
            :src="InfoDetail.tempSealImageUrl"
            :preview-src-list="[InfoDetail.tempSealImageUrl]"
            class="head_pic"
          /> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer" v-if="InfoDetail.status == 0">
          <el-button @click="hanleRefuse">拒绝</el-button>
          <el-button type="primary" @click="hanlePass">通过</el-button>
        </span>
        <span> <el-button @click="handlePrint" class="printbtn">打印</el-button></span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import print from "print-js";
import api from "../api/api";
export default {
  setup(props, context) {
    console.log(context);
    // 接收父组件传过来的数据
    console.log(context.attrs);
    const ruleDetailList = context.attrs.ruleDetailList;
    const InfoDetail = context.attrs.InfoDetail;
    const editVisible = ref(true);
    const imgList = ref([]);
    console.log();
    if (InfoDetail && InfoDetail.Imags) {
      Object.keys(InfoDetail.Imags).forEach((item) => {
        if (InfoDetail.Imags[item].ImagPath) {
          var img = api.serverUrl() + InfoDetail.Imags[item].ImagPath;
          imgList.value.push(img);
        }
        console.log(imgList.value);
      });
    }
    // 关闭
    const handleclosedetail = () => {
      editVisible.value = false;
      // 子组件传值给父组件
      context.emit("handleclosedetail", editVisible.value);
    };
    // 拒绝事件
    const hanleRefuse = () => {
      context.emit("hanleRefuse", editVisible.value);
    };
    const hanlePass = () => {
      context.emit("hanlePass", editVisible.value);
    };
    const handlePrint = () => {
      printJS({
        printable: "printCons",
        type: "html",
        targetStyles: ["*"],
        ignoreElements: ["no-print", "bc", "gb"],
      });
    };
    return {
      editVisible,
      ruleDetailList,
      hanlePass,
      hanleRefuse,
      InfoDetail,
      imgList,
      handleclosedetail,
      handlePrint,
    };
  },
};
</script>
<style scoped>
.box {
  position: relative;
}
.head_pic {
  width: 80px;
  margin-right: 10px;
}
.content_info {
  display: grid;
  padding: 0 30px;
  grid-template-columns: 50% 50%;
}
.el-form-item {
  margin-bottom: 15px;
}
.printbtn {
  position: absolute;
  right: 90px;
  top: 40px;
}
</style>
